import React, { useEffect, useState } from "react";
import { useNavigate } from "react-router";
import { busLineQuery } from "../../service/busService";

import { NavBar } from "antd-mobile";
import "./bus.scss";

export default function BusMain() {
  let [busList, setBusList] = useState(
    [] as {
      id: string;
      startTime: string;
      first: string;
      name: string;
      endTime: string;
      end: string;
      price: string;
      mileage: string;
    }[]
  );
  let navigate = useNavigate();

  useEffect(() => {
    (async () => {
      let res = await busLineQuery();
      setBusList(res.data.rows);
      // console.log(data)
    })();
  }, []);
  return (
    <div>
      <NavBar
        onBack={() => navigate(-1)}
        right={
          <div style={{ fontSize: "16px", color: "#3f45ff" }} onClick={() => navigate("/bus_query/ticket")}>
            我的车票
          </div>
        }
      >
        路线查询
      </NavBar>
      <div className="busline-box">
        {busList.map((item) => {
          return (
            <div
              className="busline-item"
              id={item.id}
              onClick={() => {
                navigate("/bus_query/detail/" + item.id);
              }}
              key={item.id}
            >
              <div className="busline-top">
                <div className="busline-left">
                  <div className="busline-time">{item.startTime}</div>
                  <div className="busline-start_address">
                    <span>始发</span>
                    {item.first}
                  </div>
                </div>
                <div className="busline-middle">
                  <div className="busline-bos_id">{item.name}</div>
                </div>
                <div className="busline-right">
                  <div className="busline-time">{item.endTime}</div>
                  <div className="busline-end_address">
                    <span>终点</span>
                    {item.end}
                  </div>
                </div>
              </div>
              <div className="busline-bottom">
                <div className="busline-li">
                  票价：<span>{item.price}</span>
                </div>
                <div className="busline-li">
                  里程：<span>{item.mileage}</span>
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}
